<template>
	<div class="box">
		<div id="screenshot">
			<p class="title">缺血性心血管病发病风险评估报告</p>
			<table>
				<tr>
					<th>性别</th>
					<th>年龄</th>
					<th>收缩压</th>
					<th>BMI</th>
					<th>吸烟</th>
					<th>糖尿病</th>
					<th>总胆固醇</th>
					<th>评估</th>
				</tr>
				<tr>
					<td v-for="(item,index) in info.userOptionValueVos">{{item.value}}</td>
					<td></td>
				</tr>
				<tr>
					<td>评分</td>
					<td v-for="(item,index) in info.userOptionValueVos" v-if="index >= 1">{{item.number}}</td>
					<td>{{info.icvdParameterVo && info.icvdParameterVo.totalScore}}分</td>
				</tr>
				<tr>
					<td colspan="2">绝对风险</td>
					<td colspan="5">10年缺血性心血管疾病发病</td>
					<td>{{info.icvdParameterVo && info.icvdParameterVo.absoluteRisk}}%</td>
				</tr>
				<tr>
					<td rowspan="4"  colspan="2">相对风险</td>
					<td colspan="5">比同年龄同性别组的平均风险</td>
					<td>{{info.icvdParameterVo && info.icvdParameterVo.subtractAvg > 0 ? '高':'低'}}{{info.icvdParameterVo && info.icvdParameterVo.subtractAvg > 0 ? info.icvdParameterVo.subtractAvg:(info.icvdParameterVo.subtractAvg+'').replace('-','')}}%</td>
				</tr>
				<tr>
					<td colspan="5">比同年龄同性别组的最低风险</td>
					<td>{{info.icvdParameterVo && info.icvdParameterVo.subtractMini > 0 ? '高':'低'}}{{info.icvdParameterVo && info.icvdParameterVo.subtractMini > 0 ? info.icvdParameterVo.subtractMini:(info.icvdParameterVo.subtractMini+'').replace('-','')}}%</td>
				</tr>
				<tr>
					<td colspan="5">是同年龄同性别组平均风险的</td>
					<td>{{info.icvdParameterVo && info.icvdParameterVo.divideAvg}}倍</td>
				</tr>
				<tr>
					<td colspan="5">是同年龄同性别组最低风险的 </td>
					<td>{{info.icvdParameterVo && info.icvdParameterVo.divideAMini}}倍</td>
				</tr>
			</table>

			<p class="title">缺血性心血管病理想风险评估报告</p>
			<table>
				<tr>
					<th>性别</th>
					<th>年龄</th>
					<th>收缩压</th>
					<th>BMI</th>
					<th>吸烟</th>
					<th>糖尿病</th>
					<th>总胆固醇</th>
					<th>评估</th>
				</tr>
				<tr>
					<td v-for="(item,index) in info.idealParameterVo && info.idealParameterVo.idealValues">{{item.value}}</td>
					<td></td>
				</tr>
				<tr>
					<td>评分</td>
					<td v-for="(item,index) in info.idealParameterVo && info.idealParameterVo.idealValues"  v-if="index >= 1">{{item.number}}</td>
					<td>{{info.idealParameterVo && info.idealParameterVo.totalScore}}分</td>
				</tr>
				<tr>
					<td colspan="2">绝对风险</td>
					<td colspan="5">10年缺血性心血管疾病发病</td>
					<td>{{info.idealParameterVo && info.idealParameterVo.idealAbsoluteRisk}}%</td>
				</tr>
				<tr>
					<td rowspan="4"  colspan="2">相对风险</td>
					<td colspan="5">比同年龄同性别组的平均风险</td>
					<td>{{info.idealParameterVo && info.idealParameterVo.idealSubtractAvgRisk > 0 ? '高':'低'}}{{info.idealParameterVo && info.idealParameterVo.idealSubtractAvgRisk > 0 ? info.idealParameterVo.idealSubtractAvgRisk:(info.idealParameterVo.idealSubtractAvgRisk+'').replace('-','')}}%</td>
				</tr>
				<tr>
					<td colspan="5">比同年龄同性别组的最低风险</td>
					<td>{{info.idealParameterVo && info.idealParameterVo.idealSubtractMiniRisk > 0 ? '高':'低'}}{{info.idealParameterVo && info.idealParameterVo.idealSubtractMiniRisk > 0 ? info.idealParameterVo.idealSubtractMiniRisk:(info.idealParameterVo.idealSubtractMiniRisk+'').replace('-','')}}%</td>
				</tr>
				<tr>
					<td colspan="5">是同年龄同性别组平均风险的</td>
					<td>{{info.idealParameterVo && info.idealParameterVo.idealDivideAvgRisk}}倍</td>
				</tr>
				<tr>
					<td colspan="5">是同年龄同性别组最低风险的</td>
					<td>{{info.idealParameterVo && info.idealParameterVo.idealDivideAMiniRisk}}倍</td>
				</tr>
			</table>
		</div>
	</div>
</template>

<script>
	import html2canvas from 'html2canvas';
	export default {
		props:{
			info:{
				type: Object,
				default:function(){
					return {}
				}
			}
		},
		name:'reportImgType2',
		data() {
			return {
				base64: '',
				consult:['kg/m²','','','次/周','g','g','g/Kg','ml','mg','','','',''],
			}
		},
		methods:{
			toImg(dom) {
				var dom = document.querySelector('#screenshot') // 获取dom元素
				return new Promise((resolve,reject)=>{
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域，但好像没什么用
					}).then((canvas) => {
						this.base64 = canvas.toDataURL('image/png')
						resolve(canvas.toDataURL('image/png'))
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		position: fixed;
		width: 864px !important;
		height: 1566px !important;
		margin: 0 100px;
		left: 0;
		top: -10000px;
		// top: 30px;
		#screenshot{
			height: 100%;
		}
		// top: -10000px;
		.title {
			color: #00B25C;
			font-size: 40px;
			font-weight: bold;
			margin-top: 45px;
		}
		table {
			width: 100%;
			border-spacing: 0;
			margin-top: 42px;
			word-wrap: break-word;
			word-break: break-all;
			tr {
				color: #FFFFFF;
				font-size: 23px;
				text-align: center;
				box-sizing: border-box;			
				th,td {
					width:108px;
					height: 65px;
					line-height: 65px;
					background-color: #00C481;
					border-right: 1px solid #FFFFFF;
					border-bottom: 1px solid #00C481;
					border-radius: 8px 8px 0px 0px;
					font-weight: 400;
					box-sizing: border-box;
				}
				td {
					background-color: #F6FFFB;
					border-right: 1px solid #00C481;
					border-radius: 0;
					color: #00C481;
					font-size: 22px;
				}
				td:first-child {
					border-left: 1px solid #00C481;
				}
				th:nth-last-child(2),td:nth-last-child(2) {
					width: 133px;
				}
				th:last-child,td:last-child {
					width: 130px;
				}
			}
			tr:nth-child(n+4) {
				td {
					background-color: #E2FBEF;
				}
				td:nth-child(1) {
					width: 216px;
				}
				td:nth-child(2) {
					width: 565px;
				}
				td:last-child {
					width: 130px;
				}
			}
			tr:nth-child(n+6) {
				td:nth-child(1) {
					border-left: 0;
				}
			}
			tr:first-child {
				border: none;
			}
		}
	}
	.decode{
		margin-top: 20px;
		h2{
			font-size: 26px;
			color: #00C481;
			margin-bottom: 20px;
		}
		font-size: 24px;
		color: #00C481;
	}
</style>
